<template>
  <div>
    <div style="padding-top:20px">
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">危险化学品经营许可证</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.chemical }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">营业执照</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.license }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">统一社会信用代码</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.licenseCode }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">批发经营证书</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.wholesale }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">其他证件</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.other }}</span>-->
      <!--        </div>-->
      <!--      </div>-->

      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.accountNumber') }}</span>-->
      <!--          <span-->
      <!--            class="shop_img_notitle">{{ metaInfo.bankNum == null || metaInfo.bankNum == "" ? $t('sysSetUp.componentsSecurity.none') : metaInfo.bankNum }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.bank') }}</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.bankName == null || metaInfo.bankName == "" ? '无' : metaInfo.bankName }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{ $t('sysSetUp.componentsSecurity.businessCategory') }}</span>-->
      <!--          <span class="shop_img_notitle">{{ metaInfo.shopCategoryName ? metaInfo.shopCategoryName : "无" }}</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="account_conter_item" v-if="metaInfo.licenseCode">
        <div
          style=" display: flex;flex-direction: row; align-items: flex-start; margin-bottom: 30px;margin-left: 50px;">
          <span class="account_item_title">统一社会信用代码</span>
          <span class="shop_img_notitle">{{ metaInfo.licenseCode }}</span>
        </div>
      </div>
      <!--<div class="account_conter_item">-->
      <!--<div class="account_item">-->
      <!--<span class="account_item_title">统一社会信用代码</span>-->
      <!--<div class="shop_img">-->
      <!--<el-image :preview-src-list="srcList" :src="metaInfo.licenseCode" style="width:140px;height:140px" alt=""-->
      <!--v-if="metaInfo.licenseCode"></el-image>-->
      <!--<span class="shop_img_notitle" v-if="!metaInfo.licenseCode">统一社会信用代码</span>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">营业执照</span>
          <div class="shop_img">
            <div v-for="item in meta_info.licenseList">
              <a :href="item" target="_blank">
                <el-image :src="item"
                          style="width:140px;height:140px;margin-right: 10px;"
                          @click="clickImage"
                          v-if="metaInfo.license"></el-image>
              </a>
            </div>

            <!--            <el-image-->
            <!--              :preview-src-list="srcList"-->
            <!--              @click.stop="handleClickStop"-->
            <!--              @click.capture="handlePreviewImage(0)"-->
            <!--              :src="metaInfo.license"-->
            <!--              style="width:140px;height:140px"-->
            <!--              alt=""-->
            <!--              v-if="metaInfo.license"></el-image>-->
            <span class="shop_img_notitle" v-if="!metaInfo.license">营业执照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">批发经营证书</span>
          <div class="shop_img">
            <div v-for="item in meta_info.wholesaleList">
              <a :href="item" target="_blank">
                <el-image :src="item"
                          style="width:140px;height:140px"
                          @click="clickImage"
                          v-if="metaInfo.wholesale"></el-image>
              </a>
            </div>
            <!--            <el-image-->
            <!--              :preview-src-list="srcList"-->
            <!--              @click.stop="handleClickStop"-->
            <!--              @click.capture="handlePreviewImage(1)"-->
            <!--              :src="metaInfo.wholesale"-->
            <!--              style="width:140px;height:140px"-->
            <!--              alt=""-->
            <!--              v-if="metaInfo.wholesale"></el-image>-->
            <span class="shop_img_notitle" v-if="!metaInfo.wholesale">批发经营证书</span>
          </div>
        </div>
      </div>

      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">危险化学品经营许可证</span>
          <div class="shop_img">
            <div v-for="item in meta_info.chemicalList">
              <a :href="item" target="_blank">
                <el-image :src="item"
                          style="width:140px;height:140px"
                          @click="clickImage"
                          v-if="metaInfo.chemical"></el-image>
              </a>
            </div>
            <!--            <el-image-->
            <!--              ref="preview"-->
            <!--              :preview-src-list="srcList"-->
            <!--              @click.stop="handleClickStop"-->
            <!--              @click.capture="handlePreviewImage(2)"-->
            <!--              :src="metaInfo.chemical"-->
            <!--              style="width:140px;height:140px"-->
            <!--              alt=""-->
            <!--              v-if="metaInfo.chemical"></el-image>-->
            <span class="shop_img_notitle" v-if="!metaInfo.chemical">危险化学品经营许可证</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">其他证件</span>
          <div class="shop_img">
            <div v-for="item in meta_info.otherList">
              <a :href="item" target="_blank">
                <el-image :src="item"
                          style="width:140px;height:140px"
                          @click="clickImage"
                          v-if="metaInfo.other"></el-image>
              </a>
            </div>
            <!--            <el-image-->
            <!--              :preview-src-list="srcList"-->
            <!--              @click.stop="handleClickStop"-->
            <!--              @click.capture="handlePreviewImage(3)"-->
            <!--              :src="metaInfo.other"-->
            <!--              style="width:140px;height:140px"-->
            <!--              alt="" v-if="metaInfo.other"></el-image>-->
            <span class="shop_img_notitle" v-if="!metaInfo.other">其他证件</span>
          </div>
        </div>
      </div>
      <!--      <div class="account_conter_item">-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{$t('sysSetUp.componentsSecurity.foodBusinessLicense')}}</span>-->
      <!--          <div class="shop_img">-->
      <!--            <el-image :preview-src-list="srcList" :src="metaInfo.attach.food" style="width:140px;height:140px" alt="" v-if="metaInfo.attach.food"></el-image>-->
      <!--            <span class="shop_img_notitle" v-if="!metaInfo.attach.food">{{$t('sysSetUp.componentsSecurity.noLicenseTemporarily')}}</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="account_item">-->
      <!--          <span class="account_item_title">{{$t('sysSetUp.componentsSecurity.scenePhotosInTheStore')}}</span>-->
      <!--          <div class="shop_img">-->
      <!--            <el-image :preview-src-list="srcList" :src="metaInfo.attach.scene" style="width:140px;height:140px" alt="" v-if="metaInfo.attach.scene"></el-image>-->
      <!--            <span class="shop_img_notitle" v-if="!metaInfo.attach.scene">{{$t('sysSetUp.componentsSecurity.noScenePhoto')}}</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
import {find, update} from "@/api/customer";
import singleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import utils from "@/utils/utils";
import {mapGetters} from 'vuex'

export default {
  computed: {
    // ...mapGetters([
    //   'mchId'
    // ])
  },
  components: {singleUpload},
  directives: {permission},
  props: {

    customerMate: {
      type: String,
    },
    custoemrMateInfo: {
      type: Object,
    },
    customerId: {
      type: Number,
    },
  },

  data() {
    return {
      loading: false, // 按钮防双击
      srcList: [],
      metaInfo: {},
      meta_info: {
        licenseList: [],
        wholesaleList: [],
        chemicalList: [],
        otherList: [],
      },
      meta: "",
    };
  },
  created() {
    this.getData()
    if (utils.isNull(this.metaInfo)) {
      this.meta = "0";
    }
    // console.log('customerId',this.customerId)
    // console.log('customerMate',this.customerMate)
    // console.log('custoemrMateInfo',this.custoemrMateInfo)
    // console.log('metaInfo',this.metaInfo)

  },

  watch: {
    metaInfo: {
      handler(val, old) {
        // console.log('val',val)
        if (val == null) {
          val.metaInfo = "0"
        }
        if (val.metaInfo) {
          if (typeof val.metaInfo.license == "String") {
            val.metaInfo = JSON.parse(val.metaInfo);
            if (utils.isNull(val.metaInfo.license)) {
              val.metaInfo.license = "0";
            }
          }
        } else {
          val.metaInfo = {
            chemical: "",
            license: "",
            licenseCode: '',
            other: "",
            wholesale: "",
          };
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getData() {
      this.id = this.toString(this.customerId);
      console.log('Id', typeof (this.customerId))
      const _this = this;
      find(this.id).then((response) => {
        console.log(response.data, 'getData')
        _this.metaInfo = response.data.customer.metaInfo;
        _this.meta = response.data.customer.meta;

        if (_this.metaInfo.license && _this.metaInfo.license !== '') _this.meta_info.licenseList = _this.metaInfo.license.split(",");
        if (_this.metaInfo.wholesale && _this.metaInfo.wholesale !== '') _this.meta_info.wholesaleList = _this.metaInfo.wholesale.split(",");
        if (_this.metaInfo.chemical && _this.metaInfo.chemical !== '') _this.meta_info.chemicalList = _this.metaInfo.chemical.split(",");
        if (_this.metaInfo.other && _this.metaInfo.other !== '') _this.meta_info.otherList = _this.metaInfo.other.split(",");

        /*   if (_this.metaInfo.license && _this.metaInfo.license !== '') this.srcList.push(_this.metaInfo.license);
        if (_this.metaInfo.wholesale && _this.metaInfo.wholesale !== '') this.srcList.push(_this.metaInfo.wholesale);
        if (_this.metaInfo.chemical && _this.metaInfo.chemical !== '') this.srcList.push(_this.metaInfo.chemical);
        if (_this.metaInfo.other && _this.metaInfo.other !== '') this.srcList.push(_this.metaInfo.other);*/

        console.log(this.meta_info, 'meta_info')

      })
    },
    forceRefresh() {
      this.$forceUpdate()
    },
    submit() {
      var _this = this;
      this.loading = true;
      update(this.metaInfo)
        .then((res) => {
          this.loading = false;
          this.$message.success("修改成功");
          _this.$store.dispatch("tagsView/delView", _this.$route).then(({visitedViews}) => {
            _this.$router.push({
              path: "/customer/list",

            });
          });
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 防止点击 el-imgae 后将页面设置为 document.body.style.overflow = 'hidden'
    clickImage() {
      document.body.style = '';
    },

    //el-image点击蒙版关闭
    handleClickStop() {
      this.$nextTick(() => {
        let domImageView = document.querySelector(".el-image-viewer__mask"); // 获取遮罩层dom
        if (!domImageView) {
          return;
        }
        domImageView.addEventListener("click", () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector(".el-image-viewer__close").click();
        });
      });
    },

    //重置每次预览的图片
    handlePreviewImage(index) {
      const imageViewerChild = this.$refs.previewImage[index].$children[0]
      console.log(imageViewerChild)
      // 重置图片缩放、旋转样式
      imageViewerChild && imageViewerChild.reset()
      // 每次点击 显示当前点击的图片
      imageViewerChild && (imageViewerChild.index = index)
    },

    inputClick() {
      this.$forceUpdate()
    },
    toString: function (value) {
      return value.toString();
    },
  },
};
</script>

<style scoped>
.account_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 50px;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 160px;
  display: block;
}

.shop_img {
  min-width: 160px;
  height: 160px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 5px;
  padding-right: 10px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop_img div{
  width: 140px;
  height: 140px;
  text-align: center;
  margin: 0 5px;
}

.shop_img_notitle {
  font-size: 14px;
  color: #c0c4cc;
}

.account_conter_item {
  display: flex;
}
</style>


